<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <table>
            <!-- 
                某些 HTML 元素对于放在其中的元素类型有限制，
                例如 <ul>，<ol>，<table> 和 <select>，相应的，
                    某些元素仅在放置于特定元素中时才会显示，
                    例如 <li>，<tr> 和 <option>。

                如果说 table 中放的不是 tr 标签，会导致 tr 被提起到 table 的外部
             -->
            <!-- <row></row> -->
            <tr is="vue:row"></tr>
        </table>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {}
        },
    })

    app.component('row', {
        template: `<tr>
                <td> 我有一个朋友上班之前吃了一个橘子，他吃着吃着就哭了，橘子有伴。 </td>
            </tr>`
    })

    app.mount('#app')
</script>

</html>